<template>
	<el-main>
		<el-row class="login-form">
			<el-col :span="12" class="logo">&nbsp;</el-col>
			<el-col :span="12">
				<h1 class="align-center">社团管理后台注册</h1>
				<el-form ref="registForm" :model="registForm" label-width="80px" size="mini">
					<el-form-item label="学号" prop="number" :rules="[
                              {required: true, message: '请输入学号', trigger: 'change'},
                             {validator: checkNumber, trigger: 'change'}]">
						<el-input v-model="registForm.number"></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name" :rules="[
                              {required: true, message: '请输入姓名', trigger: 'change'},
                             {validator: checkName, trigger: 'change'}]">
						<el-input v-model="registForm.name"></el-input>
					</el-form-item>
					<el-form-item label="班级" prop="department" :rules="[
                              {required: true, message: '请输入班级名称', trigger: 'change'},
                             {validator: checkDepartment, trigger: 'change'}]">
						<el-input v-model="registForm.department"></el-input>
					</el-form-item>
					<el-form-item label="专业" prop="major" :rules="[
                              {required: true, message: '请输入专业名称', trigger: 'change'},
                             {validator: checkMajor, trigger: 'change'}]">
						<el-input v-model="registForm.major"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" prop="phone" :rules="[
                              {required: true, message: '请输入手机号码', trigger: 'change'},
                             {validator: checkPhone, trigger: 'change'}]">
						<el-input v-model="registForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}]">
						<el-input type="age" v-model.number="registForm.age" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="registForm.sex">
							<el-radio label="男">男</el-radio>
							<el-radio label="女">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="密码" prop="password" :rules="[
                              {required: true, message: '请输入密码', trigger: 'change'},
                             {validator: checkPassword, trigger: 'change'}]">
						<el-input type="password" v-model="registForm.password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="ispassword" :rules="[
                              {required: true, message: '请确认密码', trigger: 'change'},
                             {validator: checkisPassword, trigger: 'change'}]">
						<el-input type="password" v-model="registForm.ispassword"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" v-model="registForm.remarks"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="doregist">立即注册</el-button>
						<el-button @click="dologin">去登陆</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				registForm: {
					number: '',
					name: '',
					department: '',
					major: '',
					type: 1,
					phone: '',
					sex: '男',
					age: '',
					password: '',
					ispassword: '',
					remarks: ''
				},
			}
		},
		methods: {
			//=========================================
			//注册
			//=========================================
			doregist() {
				console.log(this.registForm)
				if(!(/^[1-9][0-9]{4,10}$/.test(this.registForm.number))){
					this.$message("请输入正确的学号(5-11位数字)!")
				}else if(!(/^[\u4E00-\u9FA5]{2,4}$/.test(this.registForm.name))){
					this.$message("请输入正确的姓名(2-4位汉字)!")
				}else if(!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.registForm.department))){
					this.$message("请输入正确的班级(2-10位字符)!")
				}else if(!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(this.registForm.major))){
					this.$message("请输入正确的专业(2-10位字符)!")
				}else if(!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(this.registForm.phone))){
					this.$message("请输入正确的手机号(如:18600000000)")
				}else if(!(/^[1-9][0-9]{0,2}$/.test(this.registForm.age))){
					this.$message("请输入正确的年龄(1-3位数字)!")
				}else if(!(/^[0-9A-Za-z]{6,15}$/.test(this.registForm.password))){
					this.$message("密码不得少于6位和多于16位")
				}else{
					this.$axios({
						method: 'get',
						url: '/user/regist',
						params: {
							number: this.registForm.number,
							name: this.registForm.name,
							department: this.registForm.department,
							major: this.registForm.major,
							phone: this.registForm.phone,
							sex: this.registForm.sex,
							type: this.registForm.type,
							age: this.registForm.age,
							password: this.registForm.password,
							remarks: this.registForm.remarks
						}
					}).then(res => {
						if (res.data.state == true) {
							this.$router.push({
								path: '/'
							})
							this.$message(res.data.msg)
						} else {
							this.$message(res.data.msg)
						}
					}).catch(err => {
						this.$message(err)
					})
				}
				
			},
			//=========================================
			//去登陆
			//=========================================
			dologin() {
				this.$router.push({
					path: '/'
				})
			},
			//=========================================
			//校验规则
			//=========================================
			callback() {
				this.$router.push({
					name: 'cfin.biz.my-registration'
				});
			},
			checkNumber(rule, value, callback) {
				if (!(/^[1-9][0-9]{4,10}$/.test(value))) {
					callback(new Error('请输入正确的学号(5-11位数字)!'));
				}
			},
			checkAge(rule, value, callback) {
				if (!(/^[1-9][0-9]{0,2}$/.test(value))) {
					callback(new Error('请输入正确的年龄(1-3位数字)!'));
				}
			},
			checkPhone(rule, value, callback) {
				if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(value))) {
					callback(new Error('请输入正确的手机号码(如:18600000000)!'));
				}
			},
			checkName(rule, value, callback) {
				if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(value))) {
					callback(new Error('请输入正确的姓名(2-4位汉字)!'));
				}
			},
			checkDepartment(rule, value, callback) {
				if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(value))) {
					callback(new Error('请输入正确的班级(2-10位字符)!'));
				}
			},
			checkMajor(rule, value, callback) {
				if (!(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/.test(value))) {
					callback(new Error('请输入正确的专业(2-10位字符)!'));
				}
			},
			checkPassword(rule, value, callback) {
				if (!(/^[0-9A-Za-z]{6,15}$/.test(value))) {
					callback(new Error('密码不得少于6位和多于16位'));
				}
			},
			checkisPassword(rule, value, callback) {
				if (this.registForm.password!=this.registForm.ispassword) {
					callback(new Error('两次密码不匹配!'));
				}
			},
		}
	}
</script>

<style scoped>
	.el-main {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(/static/login.jpg) no-repeat;
		background-size: cover;
	}

	.login-form {
		border-radius: 5px;
		overflow: hidden;
		display: flex;
		background: #FFF;
		width: 700px;
		height: 600px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.el-form {
		margin: 20px;
	}

	.logo {
		background: url(/static/login_box.jpg) no-repeat;
		background-size: cover;
	}
</style>
